<template>
    <div class="app-container">
        <div class="tcl">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="基本信息" name="first">
                    <!-- 基本信息 -->
                    <div style="padding: 20px 100px">
                        <el-descriptions class="margin-top" size="medium" :column="2" border>
                            <el-descriptions-item>
                                <template slot="label">
                                    供应商名称
                                </template>
                                {{ this.h_name }}
                                <el-tag size="small" style="margin-left: 10px" v-if="this.f_status==2" type="danger">
                                    已驳回
                                </el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    统一社会信用代码
                                </template>
                                {{ this.h_credit_code }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    单位注册地
                                </template>
                                {{ this.h_incorporation }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    机构类型
                                </template>
                                <span v-if="this.h_institution==null" style="color: #cccccc">待填写</span>
                                <el-tag size="small" v-else>{{ this.h_institution }}</el-tag>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    企业性质
                                </template>
                                <span v-if="this.h_quality==null"  style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_quality }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    成立日期
                                </template>
                                {{ this.h_start_time }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    法人/负责人
                                </template>
                                {{ this.h_juridical }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    法人/负责人身份证号
                                </template>
                                {{ this.h_juridical_identity }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    单位联系地址
                                </template>
                                <span v-if="this.h_address==null"  style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_address }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    公司简介
                                </template>
                                <span v-if="this.h_desc==null"  style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_desc }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    营业执照扫描件
                                </template>
                                <div class="demo-image__preview">
                                    <el-image style="width: 100px; height: 100px;" fit="contain" :src="h_copies" :preview-src-list="h_copies_list"></el-image>
                                </div>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    法人/负责人身份证扫描件
                                </template>
                                <div class="demo-image__preview">
                                    <el-image style="width: 100px; height: 100px;" fit="contain" :src="idCardCopy" :preview-src-list="idCardCopyList"></el-image>
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>

                    <!-- 开户行 -->
                    <div style="padding: 0 100px; text-align: center;">
                        <p style="color: red; font-size: 12px;text-align: left;">注: 开票信息专用</p>
                        <el-descriptions class="margin-top" size="medium" :column="2" border>
                            <el-descriptions-item>
                                <template slot="label">
                                    开户行
                                </template>
                                <span v-if="this.h_bank==null"  style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_bank }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    银行账号
                                </template>
                                <span v-if="this.h_account==null" style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_account }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    开户行地址
                                </template>
                                <span v-if="this.h_bank_address==null" style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_bank_address }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    单位注册电话
                                </template>
                                <span  v-if="this.h_sign_phone==null" style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_sign_phone }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    注册资本（万元）
                                </template>
                                <span v-if="this.h_capital==null" style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_capital }}</span>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    实缴资本（万元）
                                </template>
                                <span v-if="this.h_actual_capital==null" style="color: #cccccc">待填写</span>
                                <span v-else>{{ this.h_actual_capital }}</span>
                            </el-descriptions-item>
                        </el-descriptions>
                        <el-form style="margin-top: 20px" lable-width="80px">
                            <el-form-item label="审核意见">
                                <el-input type="textarea" placeholder="请输入审核意见" v-model="opinion"></el-input>
                            </el-form-item>
                        </el-form>
                        <el-row>
                            <el-button @click="pass" type="primary" v-if="this.f_status==0">通过</el-button>
                            <el-button @click="overrule" type="danger" v-if="this.f_status==0">驳回</el-button>
                            <el-button @click="cancel" >取消</el-button>
                        </el-row>
                    </div>
                </el-tab-pane>
                <!-- 业务经办人信息 -->
                <el-tab-pane label="业务经办人信息" name="second">
                    <div style="padding: 20px 100px;">
                        <el-descriptions class="margin-top" size="medium" :colum="2" border>
                            <el-descriptions-item>
                                <template slot="label">
                                    姓名
                                </template>
                                {{ this.operator.yw_name }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    身份证号
                                </template>
                                {{ this.operator.yw_idcrad }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    手机号
                                </template>
                                {{ this.operator.yw_phone }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    邮箱
                                </template>
                                {{ this.operator.yw_mailbox }}
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template slot="label">
                                    身份证扫描件
                                </template>
                                <div class="demo-image__preview">
                                    <el-image style="width: 100px; height: 100px;" fit="contain" :src="yw_idcrad_copy" :preview-src-list="yw_idcrad_copy_list"></el-image>
                                </div>
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </el-tab-pane>
                <!-- 核心技术人员 -->
                <el-tab-pane label="核心技术人员" name="third">
                    <div style="padding: 20px 100px;">
                        <el-table stripe v-loading="loading" :data="personnelList">
                            <el-table-column type="index" label="序号" align="center" width="80"/>
                            <el-table-column label="姓名" align="center" prop="js_name"/>
                            <el-table-column label="职位" align="center" prop="js_education"/>
                            <el-table-column label="学历" align="center" prop="js_position"/>
                            <el-table-column label="职称" align="center" prop="js_title"/>
                        </el-table>
                        <pagination
                            v-show="total>0"
                            :total="total"
                            :page.sync="personnel.pageNum"
                            :limit.sync="personnel.pageSize"
                            @pagination="personnelList"
                        />
                    </div>
                </el-tab-pane>
                <!-- 企业资质 -->
                <el-tab-pane label="企业资质" name="fourth">
                    <div style="padding: 20px 100px;">
                        <el-table stripe v-loading="loading" :data="enterpriseList">
                            <el-table-column type="index" label="序号" align="center" width="80"/>
                            <el-table-column label="证书名称" align="center" prop="zz_cert_name"/>
                            <el-table-column label="证书编号" align="center" prop="zz_cert_no"/>
                            <el-table-column label="发证单位" align="center" prop="zz_unit"/>
                            <el-table-column label="发证日期" align="center" prop="zz_date"/>
                            <el-table-column label="有效期至" align="center" prop="zz_expiration_date"/>
                        </el-table>
                        <pagination
                        v-show="total1>0"
                        :total="total1"
                        :page.sync="enterprise.pageNum"
                        :limit.sync="enterprise.pageSize"
                        @pagination="enterpriseList"
                        />
                    </div>
                </el-tab-pane>
                <!-- 业绩 -->
                <el-tab-pane label="业绩" name="fifth">
                <div style="padding: 20px 100px;">
                    <el-table stripe v-loading="loading" :data="achievementList">
                        <el-table-column type="index" label="序号" align="center" width="80"/>
                        <el-table-column label="采购单位" align="center" prop="yj_unit"/>
                        <el-table-column label="合作方" align="center" prop="yj_partner"/>
                        <el-table-column label="签订日期" align="center" prop="yj_date"/>
                        <el-table-column label="合同金额（万元）" align="center" prop="yj_rmb"/>
                        <el-table-column label="买方业务代表" align="center" prop="yj_bbr"/>
                        <el-table-column label="买方业务代表联系电话" align="center" prop="yj_phone"/>
                    </el-table>
                    <pagination
                        v-show="total2>0"
                        :total="total2"
                        :page.sync="achievement.pageNum"
                        :limit.sync="achievement.pageSize"
                        @pagination="achievementList"
                    />
                </div>
            </el-tab-pane>
            <!-- 财务状态 -->
            <el-tab-pane label="财务状态" name="sixth">
                <div style="padding: 20px 100px;">
                    <el-table stripe v-loading="loading" :data="financialStatusList">
                        <el-table-column type="index" label="序号" align="center" width="80"/>
                        <el-table-column label="年度" align="center" prop="c_annual"/>
                        <el-table-column label="净利润（万元）" align="center" prop="c_net_profit"/>
                        <el-table-column label="资产负债率（%）" align="center" prop="c_lev"/>
                    </el-table>
                    <pagination
                        v-show="total3>0"
                        :total="total3"
                        :page.sync="financialStatus.pageNum"
                        :limit.sync="financialStatus.pageSize"
                        @pagination="financialStatusList"
                    />
                </div>
            </el-tab-pane>
            <!-- 相关附件 -->
            <el-tab-pane label="相关附件" name="seventh">
                <div style="padding: 20px 100px;">
                    <el-table stripe v-loading="loading" :data="accessoriesList">
                        <el-table-column type="index" label="序号" align="center" width="80"/>
                        <el-table-column label="名称" align="center" prop="fj_name"/>
                        <el-table-column label="附件" align="center" prop="fj_annex"/>
                    </el-table>
                    <pagination
                        v-show="total4>0"
                        :total="total4"
                        :page.sync="accessories.pageNum"
                        :limit.sync="accessories.pageSize"
                        @pagination="accessoriesList"
                    />
                </div>
            </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script>
import{
    getSupplierByZrId,
    updateSupplier
}from '@/api/system/supplier'
import {delAccess,updateAccess} from "@/api/system/access";
import {getOperator} from "@/api/system/operator";
import {listPersonnel} from "@/api/system/personnel";
import {listEnterprise} from "@/api/system/enterprise";
import {listAchievement} from "@/api/system/achievement";
import {listStatus} from "@/api/system/financialStatus";
import {listAccessories} from "@/api/system/accessories";

export default{
    components: {},
    name: "detail",
    data(){
        return{
            loading: true,
            zrid1: this.$route.query.zr_id,
            activeName: 'first',
            opinion: null,
            hid: 0,
            zr_id: 0,
            h_name: null,
            h_credit_code: null,
            h_incorporation: null,
            h_institution: null,
            h_quality: null,
            h_start_time: null,
            h_juridical: null,
            h_juridical_identity: null,
            h_address: null,
            h_range: null,
            h_desc: null,
            h_juridical_copies: null,
            h_expiration: null,
            h_bank: null,
            h_account: null,
            h_bank_address: null,
            h_sign_phone: null,
            h_sign_address: null,
            h_capital: null,
            h_actual_capital: null,
            h_prove: null,
            f_status: null,
        //    f_opinion: null,
            f_state: null,
         //   f_classify: null,
        //    h_loginaccount: null,
        //    h_password: null,
            //核心技术人员
            personnelList: [],
            //企业资质列表
            enterpriseList: [],
            //业绩
            achievementList: [],
            //财务状态
            financialStatusList: [],
            //相关附件
            accessoriesList: [],
            //营业执照
            h_copies: '',
            h_copies_list: [],
            //法人身份证
            idCardCopy: '',
            idCardCopyList: [],
            //业务经办人身份证
            yw_idcrad_copy: '',
            yw_idcrad_copy_list: [],
            //业务经办人
            operator: {
                yw_name: null,
                yw_phone: null,
                yw_idcrad: null,
                yw_mailbox: null,
                yw_scan_idcard: null,
            },
            //核心技术人员
            total: 0,
            personnel: {
                pageNum: 1,
                pageSize: 10,
                hid: 0,
            },
            //企业资质
            total1: 0,
            enterprise: {
                pageNum: 1,
                pageSize: 10,
                hid: 0,
            },
            //业绩
            total2: 0,
            achievement: {
                pageNum: 1,
                pageSize: 10,
                hid: this.$route.query.hid,
            },
            //财务状态
            total3: 0,
            financialStatus: {
                pageNum: 1,
                pageSize: 10,
                hid: this.$route.query.hid,
            },
            //相关附件
            total4: 0,
            accessories: {
                pageNum: 1,
                pageSize: 10,
                hid: this.$route.query.hid,
            }
        }
    },
    created(){
        this.query();
    },
    methods: {
        handleClick(tab,event){
            console.log(tab,event);
        },
        cancel(){
            this.$router.back()
        },
        pass(){
            this.f_status=1;
            updateSupplier({
                "hid": this.hid,
                "f_status": this.f_status,
                "zr_id": this.zr_id,
                "f_opinion": this.opinion
            }).then(response =>{
                this.loading=true
                console.log(response);
                if(response.code==200){
                    delAccess(this.zrid1).then(res=>{
                        if(res.code == 200){
                            this.$message({
                                message: '通过成功！',
                                type: 'success'
                            });
                            window.close()
                        }
                    })
                }
            });
            this.loading = false
        },
        overrule(){
            this.f_status = 2;
            updateSupplier({"hid": this.hid,"f_status": this.f_status,"f_opinion": this.opinion}).then(response =>{
                this.loading=true
                if(response.code==200){
                    this.$message({
                        message: '驳回成功！',
                        type: 'success'
                    });
                }
            });
            this.loading = false
        },
        query(){
            getSupplierByZrId(this.zrid1).then(response =>{

                console.log(response)
                console.log(response.data.hid)
                console.log(response.data.h_copies,"DASDSDASDSAD111111111111")

                this.hid=response.data.hid
                this.h_name=response.data.h_name
                this.h_credit_code=response.data.h_credit_code
                this.h_incorporation=response.data.h_incorporation
                this.h_institution=response.data.h_institution
                this.h_quality=response.data.h_quality
                this.h_start_time=response.data.h_start_time
                this.h_juridical=response.data.h_juridical
                this.h_juridical_identity=response.data.h_juridical_identity
                this.h_address=response.data.h_address
                this.h_desc=response.data.h_desc
                this.h_bank=response.data.h_bank
                this.h_bank_address=response.data.h_bank_address
                this.h_sign_phone=response.data.h_sign_phone
                this.h_capital=response.data.h_capital
                this.h_actual_capital=response.data.h_actual_capital
                this.h_sign_address=response.data.h_sign_address
                this.h_account=response.data.h_account
                this.f_state=response.data.f_state
                this.f_status=response.data.f_status
                this.h_copies=response.data.h_copies
                this.h_copies_list=response.data.h_copies
                this.idCardCopy=response.data.h_juridical_copies
                this.idCardCopyList=response.data.h_juridical_copies
                //业务经办人
                getOperator(this.hid).then(response =>{
                    console.log("业务经办人")
                    console.log("dsds",this.hid);
                    this.operator.yw_name= response.data.yw_name
                    this.operator.yw_phone=response.data.yw_phone
                    this.operator.yw_idcrad=response.data.yw_idcrad
                    this.operator.yw_mailbox=response.data.yw_mailbox
                    this.yw_idcrad_copy=response.data.yw_scan_idcard
                    this.yw_idcrad_copy_list=response.data.yw_idcrad_copy
                })
                // 核心技术人员
                this.personnel.hid = response.data.hid
                listPersonnel(this.personnel).then(res=>{
                    console.log("核心技术人员")
                    console.log(res)
                    this.personnelList=res.rows;
                    this.total = res.total;
                })
                // 企业资质
                this.enterprise.hid = response.data.hid
                listEnterprise(this.enterprise).then(res=>{
                    console.log("企业资质")
                    console.log(res)
                    this.enterpriseList=res.rows;
                    this.total1=res.total;
                })
                // 业绩
                this.achievement.hid = response.data.hid
                listAchievement(this.achievement).then(res=>{
                    console.log("业绩")
                    console.log(res)
                    this.achievementList=res.rows;
                    this.total2=res.total;
                })
                // 财务状态
                this.financialStatus.hid = response.data.hid
                listStatus(this.financialStatus).then(res=>{
                    console.log("财务状态")
                    console.log(res)
                    this.financialStatusList=res.rows;
                    this.total3=res.total;
                })
                // 相关附件
                this.accessories.hid = response.data.hid
                listAccessories(this.accessories).then(res=>{
                    console.log("相关附件")
                    console.log(res)
                    this.accessoriesList=res.rows;
                    this.total4=res.total;
                })
            });
            this.loading=false
        }
    },mounted(){
        if (this.previewSrcList) {
            this.previewSrcList = JSON.parse(this.previewSrcList);
        }
    }
}
</script>
